<script setup>
import { ref, watch, nextTick } from "vue";

// 导入element-plus中的icon组件

import {
    Check,
    Delete,
} from "@element-plus/icons-vue"

import {
    getOrderByStatusService,
    getOrderDetailByOrderIdService,

} from '../../api/operation'

import { ElMessage } from 'element-plus';



const orderStatus = ref('')




const total = ref(1)

const orders = ref([
    {
        orderId: null,
        userId: null,
        orderDateTime: '',
        updateDateTime: '',
        status: null,
        totalPrice: null,
        discountAmount: null,
        actualAmountDue: null,
        discountPoint: null,
        paymentMethod: null,
        earnedPoints:null,
    }
    // 可以添加更多的订单对象
]);

const orderDetails = ref(
    {
        orderId: 1,
        orderDateTime: null,
        updateDateTime: null,
        status: null,
        totalPrice: null,
        discountAmount: null,
        actualAmountDue: null,
        paymentMethod: null,
        userName: '',
        email: '',
        phoneNumber: '',
        ticketVOS: ref([
            {
                ticketId: null,
                scheduleId: null,
                seatId: null,
                flightId: null,
                classId: null,
                className: '',
                description: '',
                rowNumber: '',
                columnNumber: '',
                seatNumber: '',
                status: null,
                price: null,
                seatType: '',
                facilities: '',
                createTime: null,
                updateTime: null,
                purchaseDate: null,
                departureDate: null,
                departureTime: null,
                arrivalDate: null,
                arrivalTime: null,
                delayInfo: null,
                departureAirportName: '',
                arrivalAirportName: '',
                flightDistance: null,
                flightNumber: ''
            }
            // 可以根据需要添加更多的票详情对象
        ])
    }
    // 可以根据需要添加更多的订单对象
);


const getOrderByStatus = async () => {

    let params = new URLSearchParams();
    params.append('status', orderStatus.value);

    let result = await getOrderByStatusService(params);

    if (result.code === 200) {
        orders.value = result.data;
        console.log(orders.value);

    } else {
        ElMessage.error(result.msg);
    }

}



// 获取订单详情
const getOrderDetailByOrderId = async (orderId) => {

    let result = await getOrderDetailByOrderIdService(orderId);

    console.log(result);
    if (result.code === 200) {

        orderDetails.value = result.data;
    } else {
        ElMessage.error(result.msg);
    }

}

const dialogOfOrderDetailVisible = ref(false);



const orderDetail = (orderId) => {

    getOrderDetailByOrderId(orderId);

    dialogOfOrderDetailVisible.value = true;


}


const formatStatus = (status) => {

    if (status === 2) {
        return "订单已经生成"
    } else if (status === 3) {
        return "订单已确认"
    } else if (status === 5) {
        return "订单已支付"
    }else if (status === 8) {
        return "订单已完成"
    } else {
        return "未知状态"

    }

}


const formatTicketStatus = (status) => {
  const statusMap = {
    1: '可购票',
    2: '待支付',
    3: '已完成',
    5: '已支付'

  };
  return statusMap[status] || '未知状态';
};




















// 改签数据模型


































</script>

<template>
    <el-card>

        <template>
            <div class="header">
                <span>订单管理</span>
            </div>
        </template>

        <el-form-item label="订单状态" style="width: 200px;">
            <el-select aria-placeholder="请选择订单状态" v-model="orderStatus" @change="getOrderByStatus">
                <el-option label="订单已经生成" value="2"></el-option>
                <el-option label="订单已确认待支付" value="3"></el-option>
                <el-option label="订单已支付" value="5"></el-option>
                <el-option label="订单已完成" value="8"></el-option>
            </el-select>
        </el-form-item>


        <el-table :data="orders" style="width: 100%">
            <el-table-column prop="orderId" label="订单号" width="100"></el-table-column>

            <el-table-column prop="status" label="订单状态" width="150">
                <template #default="{ row }">
                    {{ formatStatus(row.status) }}
                </template>
            </el-table-column>

            <el-table-column prop="totalPrice" label="票据总价" width="120"></el-table-column>

            <!-- 显示折扣金额，如果订单状态不是"订单已经创建" -->
            <el-table-column v-if="orderStatus !== 2" prop="discountAmount" label="折扣金额" width="120"></el-table-column>

            <!-- 显示应付金额，如果订单状态不是"订单已经创建" -->
            <el-table-column v-if="orderStatus !== 2" prop="actualAmountDue" label="实际应付" width="120"></el-table-column>

            <!-- 显示积分抵扣额度，如果订单状态不是"订单已经创建" -->
            <el-table-column v-if="orderStatus !== 2" prop="discountPoint" label="积分抵扣" width="120"></el-table-column>

            <!-- 显示已获得积分，如果订单状态不是"订单已经创建" -->
            <el-table-column v-if="orderStatus == 5" prop="earnedPoints" label="已获得积分" width="120"></el-table-column>





            <el-table-column prop="orderDateTime" label="订单生成时间" width="180"></el-table-column>

            <el-table-column label="订单详情" width="120">
                <template #default="{ row }">
                    <el-button type="text" @click="orderDetail(row.orderId)">查看详情</el-button>
                </template>
            </el-table-column>

        </el-table>
    </el-card>



    <!-- 订单详情弹窗 -->
    <el-dialog v-model="dialogOfOrderDetailVisible" title="订单详情" width="100%">

        <el-from>
            <el-row>

                <el-form-item label="用户名" style="width: 200px;">
                    {{ orderDetails.userName }}

                </el-form-item>
                <el-form-item label="邮箱" style="width: 200px;">
                    {{ orderDetails.email }}
                </el-form-item>

                <el-form-item label="手机号" style="width: 200px;">
                    {{ orderDetails.phoneNumber }}
                </el-form-item>
            </el-row>
        </el-from>

        <el-table :data="orderDetails.ticketVOS" style="width: 100%">

            <el-table-column prop="ticketId" label="票据号" width="80"></el-table-column>
            <el-table-column prop="seatNumber" label="座位号" width="80"></el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template #default="{ row }">
                    {{ formatTicketStatus(row.status) }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="票价" width="120"></el-table-column>
            <el-table-column prop="flightNumber" label="航班号" width="120"></el-table-column>
            <el-table-column prop="flightDistance" label="航程距离" width="120"></el-table-column>
            <el-table-column prop="departureAirportName" label="出发机场" width="120"></el-table-column>
            <el-table-column prop="arrivalAirportName" label="到达机场" width="120"></el-table-column>
            <el-table-column prop="seatType" label="座位类型" width="120"></el-table-column>
            <!--出发时间  -->
            <el-table-column prop="departureDate" label="出发日期" width="120"></el-table-column>
            <el-table-column prop="departureTime" label="出发时间" width="120"></el-table-column>
            <!--到达时间  -->
            <el-table-column prop="arrivalDate" label="到达日期" width="120"></el-table-column>
            <el-table-column prop="arrivalTime" label="到达时间" width="120"></el-table-column>

            <el-table-column prop="description" label="描述" width="300"></el-table-column>

        </el-table>

    </el-dialog>







</template>

<style>
/* 可以在这里添加更多的样式 */
</style>